<template>
    <div class="lb-customer-handover">
        <top-nav></top-nav>
        <div class="page-main">
            <lb-tips>员工交接请慎重，该操作会取消【被交接员工】的员工身份以及{{$t('menu.BusinessCard')}}。并且会将下列【交接内容】中所有选中项的信息转移到【交接到员工】，转移后不可恢复。</lb-tips>
            <el-form @submit.native.prevent :model="setForm" ref="setForm" :rules='setFormRules' label-width="120px" class='set-form'>
                <el-form-item label="被交接员工">
                    <div>
                        <el-form-item>
                            <el-col :span="8">
                                <el-form-item prop="staff_id">
                                    <el-select v-model="setForm.staff_id" filterable placeholder="请选择">
                                        <el-option
                                        v-for="item in staffArr"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">交接到员工</el-col>
                            <el-col :span="8">
                                <el-form-item prop='to_staff_id'>
                                    <el-select v-model="setForm.to_staff_id" filterable placeholder="请选择">
                                        <el-option
                                        v-for="item in staffArr"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </div>
                </el-form-item>
                <el-form-item label="交接内容">
                  <el-checkbox-group v-model="checkList">
                    <div v-for="(item,index) in handOverList" :key="index" :style="{display:'inline-block',marginLeft:index===0 ? 0 : '15px'}">
                      <el-checkbox :label="item.title" :disabled="item.disabled"></el-checkbox>
                      <lb-tool-tips v-if="item.tips">{{item.tips}}</lb-tool-tips>
                    </div>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <lb-button type='primary' @click="submitFormInfo">{{$t('action.submit')}}</lb-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      setForm: {
        staff_id: '',
        to_staff_id: '',
        is_dynamic: 0,
        card_qr: 0
      },
      setFormRules: {
        staff_id: {required: true, message: '请选择被交接员工', trigger: 'change'},
        to_staff_id: {required: true, message: '请选择交接到员工', trigger: 'change'}
      },
      checkList: ['线索', '客户', '雷达记录', '跟进记录', '动态', '名片码'],
      checkListKey: {
        '动态': 'is_dynamic',
        '名片码': 'card_qr'
      },
      handOverList: [{
        title: '线索',
        disabled: true
      }, {
        title: '客户',
        disabled: true
      }, {
        title: '雷达记录',
        disabled: true
      // }, {
      //   title: '跟进记录',
      //   disabled: true
      }, {
        title: '动态'
      }, {
        title: '名片码'
        // tips: '勾选此项'
      }],
      staffArr: []
    }
  },
  created () {
    this.getStaffOptions()
  },
  methods: {
    submitFormInfo () {
      let {setForm, checkList, checkListKey} = this
      checkList = JSON.parse(JSON.stringify(this.checkList))
      let key = ['is_dynamic', 'card_qr']
      key.map(item => {
        setForm[item] = 0
      })
      checkList.map(item => {
        if (checkListKey[item]) {
          setForm[checkListKey[item]] = 1
        }
      })
      this.$refs['setForm'].validate(valida => {
        if (valida) {
          if (setForm.staff_id === setForm.to_staff_id) {
            this.$message.error('交接员工与被交接员工不能是同一个！')
          } else {
            this.$confirm(this.$t('是否确认该操作？该操作会取消被交接员工的员工身份以及名片！'), this.$t('tips.reminder'), {
              confirmButtonText: this.$t('action.comfirm'),
              cancelButtonText: this.$t('action.cancel'),
              type: 'warning'
            }).then(() => {
              this.$api.customerHandover({data: setForm}).then(res => {
                if (res.code === 200) {
                  this.$message.success(this.$t('tips.successSub'))
                }
              })
            })
          }
        }
      })
    },
    getStaffOptions () {
      this.$api.getAllStaffs({limit: 100000}).then(res => {
        if (res.code === 200) {
          this.staffArr = res.data.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .lb-customer-handover{
        width: 100%;
        .el-select{
          width: 200px;
        }
        .page-main{
            width: 100%;
            .set-form{
                margin-top: 24px;
                .line{
                    margin-right: 10px;
                }
            }
        }
    }
</style>
